<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="referrer" content="no-referrer" />
		<title>PiperChat</title>
		<link rel="stylesheet" href="css/amazeui.min.css" />
		<link rel="stylesheet" href="css/main.css" />
	</head>

	<body>
		<div class="box">
			<div class="wechat">
				<div class="sidestrip">
					<div class="am-dropdown" data-am-dropdown>
						<!--头像插件-->
						<div class="own_head am-dropdown-toggle">
						</div>
						<!-- 显示个人信息框 -->
						<div class="am-dropdown-content">
							<div class="own_head_top">
								<div id='own_avatar'></div>
								<div class="own_head_top_text">
									<p id="own_name" class="own_name"></p>
									<p id="own_numb" class="own_numb"></p>
								</div>
							</div>
							<div class="own_head_bottom">
								<p><span>地区</span></p>
								<div class="own_head_bottom_img">
									<a href=""><img src="images/icon/head_1.png" /></a>
									<a href=""><img src="images/icon/head_2.png" /></a>
								</div>
							</div>
						</div>
					</div>

					<!--三图标-->
					<div class="sidestrip_icon">
						<a id="si_1" style="background: url(images/icon/head_2_1.png) no-repeat;">
							<div class="bardge" style="display: none"></div>
						</a>
						<a id="si_2"></a>
						<a id="si_3"></a>
					</div>

					<!--底部扩展键-->
					<div id="doc-dropdown-justify-js">
						<div class="am-dropdown" id="doc-dropdown-js" style="position: initial;">
							<div class="sidestrip_bc am-dropdown-toggle"></div>
							<ul class="am-dropdown-content">
								<li>
									<a href="#" id="add">添加好友</a>
									<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
										<div class="am-modal-dialog">
											<div class="am-modal-hd">添加好友</div>
											<div class="am-modal-bd">
												<input type="text" class="am-modal-prompt-input">
											</div>
											<div class="am-modal-footer">
												<span class="am-modal-btn" data-am-modal-cancel>取消</span>
												<span class="am-modal-btn" data-am-modal-confirm>提交</span>
											</div>
										</div>
									</div>
								</li>

								<li><a href="#" id="create_group">创建群组</a>
									<div class="am-modal am-modal-no-btn" id="my-popup">
										<div class="am-modal-dialog">
											<div class="am-modal-hd">
												<h4 class="am-modal-title">创建群组</h4>
												<span data-am-modal-close class="am-close">&times;</span>
											</div>
											<div class="am-modal-bd">
												<div class="am-g" style="height: 100%;">
													<div class="am-u-sm-4" style="height: 100%;">
														<ul id="group_friend">

														</ul>
													</div>
													<div class="am-u-sm-8" style="height: 100%;">
														<form action="" class="am-form">
															<fieldset>
																<div class="am-form-group">
																	<input type="text" id="group_name" minlength="3"
																		placeholder="输入群组名" class="am-form-field"
																		required />
																</div>
															</fieldset>
														</form>
														<div class="am-g">
															<div class="am-u-sm-8"></div>
															<div class="am-u-sm-4">
																<button class="am-btn-secondary"
																	data-am-modal-confirm>提交</button>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<!--聊天列表-->
				<div class="middle on">
					<div class="wx_search">
						<input type="text" placeholder="搜索" />
						<button>+</button>
					</div>
					<div class="office_text">
						<ul class="user_list">

						</ul>
					</div>
				</div>

				<!--好友列表-->
				<div class="middle">
					<div class="wx_search">
						<input type="text" placeholder="搜索" />
						<button>+</button>
					</div>
					<div class="office_text">
						<ul class="friends_list">

						</ul>
					</div>
				</div>

				<!--程序列表-->
				<div class="middle">
					<div class="wx_search">
						<input type="text" placeholder="搜索收藏内容" />
						<button>+</button>
					</div>
					<div class="office_text">
						<ul class="icon_list">
							<li class="icon_active">
								<div class="icon"><img src="images/icon/icon.png" alt="" /></div>
								<span>全部收藏</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon1.png" alt="" /></div>
								<span>链接</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon2.png" alt="" /></div>
								<span>相册</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon3.png" alt="" /></div>
								<span>笔记</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon4.png" alt="" /></div>
								<span>文件</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon5.png" alt="" /></div>
								<span>音乐</span>
							</li>
							<li>
								<div class="icon"><img src="images/icon/icon6.png" alt="" /></div>
								<span>标签</span>
							</li>
						</ul>
					</div>
				</div>

				<!--聊天窗口-->
				<div class="talk_window">
					<div class="windows_top">
						<div class="windows_top_box">
							<span id="chat_subject">Piper</span>
							<ul class="window_icon">
								<li><a href=""><img src="images/icon/icon7.png" /></a></li>
								<li><a href=""><img src="images/icon/icon8.png" /></a></li>
								<li><a href=""><img src="images/icon/icon9.png" /></a></li>
								<li><a href=""><img src="images/icon/icon10.png" /></a></li>
							</ul>
							<div class="extend" class="am-btn am-btn-success"
								data-am-offcanvas="{target: '#doc-oc-demo3'}">
							</div>
							<!-- 侧边栏内容 -->
							<div id="doc-oc-demo3" class="am-offcanvas">
								<div class="am-offcanvas-bar am-offcanvas-bar-flip">
									<div class="am-offcanvas-content">

									</div>
								</div>
							</div>
						</div>
					</div>

					<!--聊天内容-->
					<div class="windows_body">
						<div class="office_text" style="height: 100%;">
							<ul class="content" id="chatbox">

							</ul>
						</div>
					</div>

					<div class="windows_input" id="talkbox">
						<div class="input_icon">
							<a href="javascript:;" id="face"></a>
							<a href="javascript:;"></a>
							<a href="javascript:;"></a>
							<a href="javascript:;"></a>
							<a href="javascript:;"></a>
							<a href="javascript:;"></a>
						</div>
						<div class="input_box">
							<textarea name="" rows="" cols="" id="input_box"></textarea>
							<button id="send">发送（S）</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
			<div class="am-modal-dialog">
				<div class="am-modal-hd">好友申请</div>
				<div class="am-modal-bd" id="friend-messages">

				</div>
				<div class="am-modal-footer">
					<span class="am-modal-btn" data-am-modal-cancel>拒绝</span>
					<span class="am-modal-btn" data-am-modal-confirm>同意</span>
				</div>
			</div>
		</div>

		<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
			<div class="am-modal-dialog">
				<div class="am-modal-hd">
					<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
				</div>
				<div class="am-modal-bd" id="alert-content">
				</div>
			</div>
		</div>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/han.avatar.js"></script>
		<script type="text/javascript" src="js/layer/layer.js"></script>
		<script type="text/javascript" src="js/mustache.js"></script>
		<script type="text/javascript" src="js/amazeui.min.js"></script>
		<script type="text/javascript" src="js/zUI.js"></script>
		<script type="text/javascript" src="js/config.js"></script>
		<script type="text/javascript" src="js/wechat.js"></script>
		<script type="text/javascript" src="js/user.js"></script>
		<script type="text/javascript" src="js/request.js"></script>
		<script type="text/javascript" src="js/socket.js"></script>
		<script src="./js/chat.js"></script>
		<script src="./js/index.js"></script>

		<script>
			window.onload = function() {
				function a() {
					var si1 = document.getElementById('si_1');
					var si2 = document.getElementById('si_2');
					var si3 = document.getElementById('si_3');
					si1.onclick = function() {
						si1.style.background = "url(images/icon/head_2_1.png) no-repeat"
						si2.style.background = "";
						si3.style.background = "";
						$(".bardge").hide();
					};
					si2.onclick = function() {
						si2.style.background = "url(images/icon/head_3_1.png) no-repeat"
						si1.style.background = "";
						si3.style.background = "";
					};
					si3.onclick = function() {
						si3.style.background = "url(images/icon/head_4_1.png) no-repeat"
						si1.style.background = "";
						si2.style.background = "";
					};
				};

				function b() {
					var btn = document.getElementById('send');
					var text = document.getElementById('input_box');
					btn.onclick = function() {
						if (text.value == '') {
							alert('不能发送空消息');
						} else {
							chat.sendMsg(text.value);
						};
					};
				};
				a();
				b();
			};
			index.init();

			if (token == null) {
				location.href = "login.html"
			}
		</script>

		<div type="text/html" style="display: none;" id="face-list">
			<ul class="face">
				<li><a class="face-item" href="#" title="微笑" code="/01/"><img src="./images/face/01.gif" /></a></li>
				<li><a class="face-item" href="#" title="色" code="/02/"><img src="./images/face/02.gif" /></a></li>
				<li><a class="face-item" href="#" title="发呆" code="/03/"><img src="./images/face/03.gif" /></a></li>
				<li><a class="face-item" href="#" title="得意" code="/04/"><img src="./images/face/04.gif" /></a></li>
				<li><a class="face-item" href="#" title="流泪" code="/05/"><img src="./images/face/05.gif" /></a></li>
				<li><a class="face-item" href="#" title="害羞" code="/06/"><img src="./images/face/06.gif" /></a></li>
				<li><a class="face-item" href="#" title="闭嘴" code="/07/"><img src="./images/face/07.gif" /></a></li>
				<li><a class="face-item" href="#" title="睡" code="/08/"><img src="./images/face/08.gif" /></a></li>
				<li><a class="face-item" href="#" title="撇嘴" code="/09/"><img src="./images/face/09.gif" /></a></li>
				<li><a class="face-item" href="#" title="大哭" code="/10/"><img src="./images/face/10.gif" /></a></li>
				<li><a class="face-item" href="#" title="发怒" code="/11/"><img src="./images/face/11.gif" /></a></li>
				<li><a class="face-item" href="#" title="调皮" code="/12/"><img src="./images/face/12.gif" /></a></li>
				<li><a class="face-item" href="#" title="呲牙" code="/13/"><img src="./images/face/13.gif" /></a></li>
				<li><a class="face-item" href="#" title="惊讶" code="/14/"><img src="./images/face/14.gif" /></a></li>
				<li><a class="face-item" href="#" title="难过" code="/15/"><img src="./images/face/15.gif" /></a></li>
				<li><a class="face-item" href="#" title="酷" code="/16/"><img src="./images/face/16.gif" /></a></li>
				<li><a class="face-item" href="#" title="冷汗" code="/17/"><img src="./images/face/17.gif" /></a></li>
				<li><a class="face-item" href="#" title="抓狂" code="/18/"><img src="./images/face/18.gif" /></a></li>
				<li><a class="face-item" href="#" title="吐" code="/19/"><img src="./images/face/19.gif" /></a></li>
				<li><a class="face-item" href="#" title="偷笑" code="/20/"><img src="./images/face/20.gif" /></a></li>
				<li><a class="face-item" href="#" title="可爱" code="/21/"><img src="./images/face/21.gif" /></a></li>
				<li><a class="face-item" href="#" title="白眼" code="/22/"><img src="./images/face/22.gif" /></a></li>
				<li><a class="face-item" href="#" title="傲慢" code="/23/"><img src="./images/face/23.gif" /></a></li>
				<li><a class="face-item" href="#" title="饥饿" code="/24/"><img src="./images/face/24.gif" /></a></li>
				<li><a class="face-item" href="#" title="困" code="/25/"><img src="./images/face/25.gif" /></a></li>
				<li><a class="face-item" href="#" title="惊恐" code="/26/"><img src="./images/face/26.gif" /></a></li>
				<li><a class="face-item" href="#" title="流汗" code="/27/"><img src="./images/face/27.gif" /></a></li>
				<li><a class="face-item" href="#" title="憨笑" code="/28/"><img src="./images/face/28.gif" /></a></li>
				<li><a class="face-item" href="#" title="大兵" code="/29/"><img src="./images/face/29.gif" /></a></li>
				<li><a class="face-item" href="#" title="奋斗" code="/30/"><img src="./images/face/30.gif" /></a></li>
				<li><a class="face-item" href="#" title="咒骂" code="/31/"><img src="./images/face/31.gif" /></a></li>
				<li><a class="face-item" href="#" title="疑问" code="/32/"><img src="./images/face/32.gif" /></a></li>
				<li><a class="face-item" href="#" title="嘘" code="/33/"><img src="./images/face/33.gif" /></a></li>
				<li><a class="face-item" href="#" title="晕" code="/34/"><img src="./images/face/34.gif" /></a></li>
				<li><a class="face-item" href="#" title="折磨" code="/35/"><img src="./images/face/35.gif" /></a></li>
				<li><a class="face-item" href="#" title="衰" code="/36/"><img src="./images/face/36.gif" /></a></li>
				<li><a class="face-item" href="#" title="骷髅" code="/37/"><img src="./images/face/37.gif" /></a></li>
				<li><a class="face-item" href="#" title="敲打" code="/38/"><img src="./images/face/38.gif" /></a></li>
				<li><a class="face-item" href="#" title="再见" code="/39/"><img src="./images/face/39.gif" /></a></li>
				<li><a class="face-item" href="#" title="擦汗" code="/40/"><img src="./images/face/40.gif" /></a></li>
				<li><a class="face-item" href="#" title="抠鼻" code="/41/"><img src="./images/face/41.gif" /></a></li>
				<li><a class="face-item" href="#" title="鼓掌" code="/42/"><img src="./images/face/42.gif" /></a></li>
				<li><a class="face-item" href="#" title="糗大了" code="/43/"><img src="./images/face/43.gif" /></a></li>
				<li><a class="face-item" href="#" title="坏笑" code="/44/"><img src="./images/face/44.gif" /></a></li>
				<li><a class="face-item" href="#" title="左哼哼" code="/45/"><img src="./images/face/45.gif" /></a></li>
				<li><a class="face-item" href="#" title="右哼哼" code="/46/"><img src="./images/face/46.gif" /></a></li>
				<li><a class="face-item" href="#" title="哈欠" code="/47/"><img src="./images/face/47.gif" /></a></li>
				<li><a class="face-item" href="#" title="鄙视" code="/48/"><img src="./images/face/48.gif" /></a></li>
				<li><a class="face-item" href="#" title="委屈" code="/49/"><img src="./images/face/49.gif" /></a></li>
				<li><a class="face-item" href="#" title="快哭了" code="/50/"><img src="./images/face/50.gif" /></a></li>
				<li><a class="face-item" href="#" title="阴险" code="/51/"><img src="./images/face/51.gif" /></a></li>
				<li><a class="face-item" href="#" title="亲亲" code="/52/"><img src="./images/face/52.gif" /></a></li>
				<li><a class="face-item" href="#" title="吓" code="/53/"><img src="./images/face/53.gif" /></a></li>
				<li><a class="face-item" href="#" title="可怜" code="/54/"><img src="./images/face/54.gif" /></a></li>
				<li><a class="face-item" href="#" title="啵一个" code="/55/"><img src="./images/face/55.gif" /></a></li>
				<li><a class="face-item" href="#" title="猪头" code="/56/"><img src="./images/face/56.gif" /></a></li>
				<li><a class="face-item" href="#" title="强" code="/57/"><img src="./images/face/57.gif" /></a></li>
				<li><a class="face-item" href="#" title="握手" code="/58/"><img src="./images/face/58.gif" /></a></li>
				<li><a class="face-item" href="#" title="胜利" code="/59/"><img src="./images/face/59.gif" /></a></li>
				<li><a class="face-item" href="#" title="OK" code="/60/"><img src="./images/face/60.gif" /></a></li>
			</ul>
		</div>

	</body>

</html>
